import router from '@/router';
import rules from '@/rules';
import { simpleFormRules } from '@/rules/FormRules';
import { useUserStore } from '@/stores/userStore';
import { getToken } from '@/utils/auth';

import { Button, Checkbox, Col, Form, FormItem, Input, InputPassword, Row } from 'ant-design-vue';
import { defineComponent, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import styles from './index.module.scss';
interface FormState {
  username: string;
  password: string;
}
export default defineComponent({
  name: 'LoginForm',
  setup() {
    const formState = reactive<FormState>({
      username: '123',
      password: '123123',
    });
    const loading = ref(false);
    const formRef = ref();
    const onFinish = () => {};
    const onFinishFailed = () => {};
    const route = useRoute();
    const pahtObj = route?.query ?? {};
    // 登录
    const handleLogin = async () => {
      const values = await formRef.value.validateFields();
      if (!values) return;

      useUserStore()
        .login(formState)
        .then(() => {
          if (getToken()) {
            const redirect: string = decodeURIComponent(pahtObj?.redirect as string);

            router.replace(JSON.parse(redirect) ?? '/');
          }
        });
    };
    return () => (
      <div
        class={[
          styles.login,
          'w-full',
          'mx-auto',
          'my-auto',
          'rounded-md',
          'shadow-md',
          'px-5',
          'py-8',
          'xl:ml-16',
          'xl:bg-transparent',
          'sm:px-8',
          'sm:py-8',
          'xl:p-4',
          'xl:shadow-none',
          'sm:w-3/4',
          'lg:w-2/4',
          'xl:w-101',
          'enter-x',
        ]}
      >
        <h2 class="mb-3 text-2xl text-center xl:text-3xl  xl:text-left enter-x font-bold">登录</h2>
        <Form
          ref={formRef}
          model={formState}
          class={['p-4', 'enter-x']}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <FormItem name="username" rules={simpleFormRules('账号', rules.login.accountPlaceholder)}>
            <Input size="large" v-model={[formState.username, 'value']} />
          </FormItem>
          <FormItem
            name="password"
            rules={simpleFormRules('密码', rules.login.passwordPlaceholder)}
          >
            <InputPassword size="large" v-model={[formState.password, 'value']} />
          </FormItem>

          <Row class="enter-x">
            <Col span={12}>
              <FormItem>
                <Checkbox>记住我</Checkbox>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem style={{ textAlign: 'right' }}>
                <Button type="link" size="small">
                  忘记密码
                </Button>
              </FormItem>
            </Col>
          </Row>
          <FormItem class="enter-x">
            <Button type="primary" size="large" block onClick={handleLogin} loading={loading.value}>
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  },
});
